<template>
  <div class="page-container">
    <div class="flex center login-bg">
      <el-card class="login-form">
        <el-form autocomplete="on" ref="formRef" :model="form">
          <h3 class="title">{{ APP_TITLE }}</h3>
          <el-form-item prop="name" :rules="{ required: true, message: '账号不能为空' }">
            <el-input
              v-model="form.name"
              type="text"
              auto-complete="off"
              placeholder="账号"
              prefix-icon="user-filled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" :rules="{ required: true, message: '密码不能为空' }">
            <el-input
              v-model="form.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              prefix-icon="lock"
              @keyup.enter="onSubmit"
            >
              <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
            </el-input>
          </el-form-item>
          <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
          <el-form-item style="width:100%;">
            <el-button
              :loading="loading"
              size="large"
              type="primary"
              style="width:100%;"
              @click.prevent="onSubmit"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ElNotification } from 'element-plus'
import { ref, reactive, toRefs, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import { APP_TITLE } from '@/config/app'
import { login } from '@/api/user'

const userStore = useUserStore()

export default {
  name: 'Login',
  setup () {
    const router = useRouter()

    const formRef = ref(null)
    const state = reactive({
      form: {
        name: '',
        password: ''
      },
      loading: false
    })

    const onSubmit = () => {
      formRef.value.validate(async valid => {
        if (!valid) return false

        state.loading = true
        try {
          const params = toRaw(state.form)
          const data = await login(params)
          userStore.setToken(data.access_token)
          delete data.access_token
          userStore.setInfo(data)
          ElNotification.success('登录成功')
          router.push('/')
        } catch (err) {
          console.log(err)
        }

        state.loading = false
      })
    }

    return {
      formRef,
      APP_TITLE,
      ...toRefs(state),
      onSubmit
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
  padding: 5vw 0;

  .login-bg {
    height: 100%;
    // background-image: url('@/static/image/login_bg.png');
    // background-size: cover;
  }

  .login-form {
    width: 400px;

    .title {
      margin: 0 auto 30px auto;
      text-align: center;
      color: #707070;
    }

    .el-input :deep(input) {
      height: 38px;
    }
  }
}
</style>
